<template>
  <div class="cinInfoList">
    <div class="mainSayBack"></div>
    <div id="mainSayWindow" class="boxShadow-white animate__animated animate__zoomIn" style="animation-duration: 300ms">
      <div id="background"></div>
      <div class="close-icon" id="closeDiscussBox" ><svg t="1612002036751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1992" width="20" height="20">
        <path d="M846.005097 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519L96.632851 254.131955c-43.644009-43.644009-43.644009-114.348328 0-157.992337s114.348328-43.644009 157.992337 0L925.001265 766.515694c43.644009 43.644009 43.644009 114.348328 0 157.992337C903.17926 946.330036 874.592179 957.24155 846.005097 957.24155z" p-id="1993" fill="#ffffff"></path>
        <path d="M175.62902 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519-43.644009-43.644009-43.644009-114.348328 0-157.992337L767.008928 96.139617c43.644009-43.644009 114.348328-43.644009 157.992337 0s43.644009 114.348328 0 157.992337L254.625188 924.508032C232.803183 946.330036 204.216101 957.24155 175.62902 957.24155z" p-id="1994" fill="#ffffff"></path></svg></div>
      <div id="userInfo">
        <div id="head"><img :src="showWal.headImg" id="headImg"/></div>
        <div id="nickname-time"><span style="font-size: 16px">{{showWal.nickname}}</span><span style="font-size: 12px">{{showWal.walTime}}</span></div>
      </div>
      <div id="walContent">
        <div><h2>{{showWal.walTitle}}</h2></div>
        <pre class="scroll" v-html="showWalInfo.walContent"></pre>
      </div>
    </div>

  </div>
</template>

<script>
    import api from "../../model/api";
    import $ from "jquery";

    export default {
      name: "cinInfoList",
      props:['showWalInfo'],
      data(){
          return {
            showWal:{},
            loginState: false,
          }
      },
      watch:{

        'showWalInfo': function(val){
          this.showWal= val
        },
        deep: true,
        immediate: true,
      },
      created() {
        // this.isLogin()
      },
      mounted() {
        $(function () {
          $('#closeDiscussBox').click(function () {
            $('#walSpace').css('display','none')
          });
        })

//打开注册页
      },

      methods:{
      },
    }
</script>

<style lang="less" scoped>
  .cinInfoList{
    /*position: absolute;*/
    /*z-index:+2;*/
  #closeDiscussBox{
    width: 24px;
    height: 24px;
    padding: 0;
    background-color: black;
    position: absolute;
    right: 10px;
    top: 10px;
  }
    #mainSayWindow{
      position: fixed;
      width: 800px;
      /*height: 700px;*/
      /*background-color: rgba(234, 234, 234, 0.85);*/
      border-radius: 6px;
      padding: 0 20px 20px 20px;
      /*margin-bottom: 20px;*/
      margin:auto;
      left:0;
      right:0;
      top:20px;
      bottom:20px;
      z-index: +3;
    }
    #userInfo{
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
    }
    #head{
      display: flex;


    }
    #walContent{
      width: 100%;
      height: calc(100% - 52px);
      background-color: white;
      filter: var(--theme-darkContent);
      border-radius: 6px;
      overflow: hidden;
      padding: 0 20px 20px 20px;
      box-sizing: border-box;
      h2{
        /*background-color: red;*/
        padding: 10px 0;
      }

      pre{
        height: calc(100% - 45px);
        white-space: pre-wrap;
        overflow-y: auto;
        overflow-x: hidden;

        /*background-color: red;*/
        & /deep/ img{
          width: 100%;
          height: auto;
        }
      }


    }
    #title{
      width: 610px;
      height: 50px;
      background: white;
      display: flex;
      align-items: center;

    }
    #headImg{
      width: 35px;
      height: 35px;
      background-color: black;
      border-radius: 6px;
    }
    #nickname-time{
      display: flex;
      flex-flow: column;
      margin-left: 10px;
    }
    textarea{
      border-radius: 6px;
      height: 80px;
      resize: none;
      padding: 5px 10px;
      margin-right: 20px;
      white-space: normal;
    }
    #pushSay{
      padding:10px 0;
      display: flex;
    }

    #headImg-sm{
      width: 30px;
      height: 30px;
      background-color: white;
      border-radius: 6px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
    #userSayContent{
      max-width: 550px;
      border-radius: 0 6px 6px 6px;
      background-color: white;
      padding: 3px 20px 10px 20px;
      font-size: 16px;
      overflow: hidden;
      span{
        /*width: 100%;*/
        white-space: normal;
        word-break: break-all;
        /*text-align: justify;*/

      }
    }
    #user{
      display: flex;
      /*background-color: red;*/
      margin-bottom: 10px;

    }
    #userSay{
      height: 378px;
      overflow-y: auto;
    }
    #plsLogin{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      margin: 10px 0;
      background-color: white;
      border-radius: 6px;
      span{
        /*margin-left: 10px;*/
        font-size: 14px;
      }
      .toLogin,.toSignUp{
        color: #5a3281;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
      }
      .toLogin:hover,.toSignUp:hover{
        color: #9e5bdf;

      }
    }







  }

</style>
